<template>
    <div class="recharge">
        <div class="header">
            <el-image
            :src="require('@/assets/image/9.png')"
            style="width: 100%; "
            fit="fill"></el-image>
        </div>
        <div class="main">
            <div class="box">
                <div class="box1">
                    <div class="box2">
                        <div class="el-icon-s-custom">普通用户</div>
                    </div>
                    <el-divider></el-divider>
                    <div class="box3">
                        <el-avatar :size="60" :src="circleUrl"></el-avatar>
                        <div class="user">{{username}}</div>
                    </div>
                    <el-divider></el-divider>
                    <div class="box4">
                        <div>会员套餐</div>
                        <div class="box5">
                            <el-badge :value="badge1" class="item">
                                <el-button class="box6" @click="border(1)">
                                    <div class="text">连续包年</div>
                                    <div class="money">￥148</div>
                                </el-button>
                            </el-badge>
                        </div>
                        <div class="box5">
                            <el-badge :value="badge2" class="item">
                                <el-button class="box6" @click="border(2)">
                                    <div class="text">连续包季</div>
                                    <div class="money">￥45</div>
                                </el-button>
                            </el-badge>
                        </div>
                        <div class="box5">
                            <el-badge  class="item">
                                <el-button class="box6" @click="border(3)">
                                    <div class="text">连续包月首月</div>
                                    <div class="money">￥15</div>
                                </el-button>
                            </el-badge>
                        </div>
                        <div class="box5">
                            <el-badge :value="badge3" class="item">
                                <el-button class="box6" @click="border(4)">
                                    <div class="text">年度大会员</div>
                                    <div class="money">￥168</div>
                                </el-button>
                            </el-badge>
                        </div>
                        <div class="box5">
                            <el-badge  class="item">
                                <el-button class="box6" @click="border(5)">
                                    <div class="text">季度大会员</div>
                                    <div class="money">￥68</div>
                                </el-button>
                            </el-badge>
                        </div>
                        <div class="box5">
                            <el-badge  class="item">
                                <el-button class="box6" @click="border(6)">
                                    <div class="text">月度大会员</div>
                                    <div class="money">￥25</div>
                                </el-button>
                            </el-badge>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="box7">
                        <div class="box8">扫码支付</div>
                        <div>
                            <el-image
                            :src="src"
                            style="width: 150px; "
                            fit="fill"></el-image>
                            <div class="box9">
                                <div class="box10">{{text}}</div>
                                <div class="box11">{{money}}</div>
                            </div>
                        </div>
                    </div>
                </div>               
            </div>
        </div>
    </div>
</template>

<script>
import UserChatApi from "@/api/user-chat"
import PersonalCenterApi from "@/api/personal-center"
import UserManagementApi from "@/api/user-management"
import VideoPlayApi from "@/api/video-play"
import VideoSearchApi from "@/api/video-search"
export default {
    data(){
        return{
            username:'',//昵称
            badge1:'6.3折',
            badge2:'6.6折',
            badge3:'7.2折',
            src:require('@/assets/image/10.png'),
            loading:true,
            text:'连续包年',
            money:'￥148',
            circleUrl:''
        }
    },
    methods:{
        userdisplay(){
            UserManagementApi.SubmitUser().then(response => {
                //将数据展示给页面
                this.username=response.data.data.name
                this.circleUrl=response.data.data.avatarUrl;
            })
        },
        border(id){
            if(id==1) {this.src=require('@/assets/image/10.png');this.text='连续包年';this.money='￥148'}
            if(id==2) {this.src=require('@/assets/image/11.png');this.text='连续包季';this.money='￥45'}
            if(id==3) {this.src=require('@/assets/image/12.png');this.text='连续包月首月';this.money='￥15'}
            if(id==4) {this.src=require('@/assets/image/13.png');this.text='年度大会员';this.money='￥168'}
            if(id==5) {this.src=require('@/assets/image/14.png');this.text='季度大会员';this.money='￥68'}
            if(id==6) {this.src=require('@/assets/image/15.png');this.text='月度大会员';this.money='￥25'}
        },
    },
    created:function(){
        this.userdisplay()
    }
};
</script>

<style scoped>
.recharge{
    background-color: #d7f5ff;
}
.main{
    width: 100%;
    text-align: center;
}
.box{
    width: 1000px;
    display: inline-block;
    margin-top: 50px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-bottom: 100px;
    background-image: url('../assets/image/17.png');
    background-repeat: no-repeat;
    background-size: cover;
}
.box1{
    float: right;
    background-color: rgba(255, 255, 255, 0.863);
    width: 800px;
    height: 800px;
    text-align: left;
}
.box2{
    padding-left: 30px;
    padding-top: 20px;
    color: blue;
}
.box3{
    padding-left: 30px;
}
.user{
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
    margin-left: 30px;
    font-size: 150%;
    font-weight: 1000;
}
.box4{
    margin-left: 30px;
}
.box5{
    display: inline-block;
    border-radius: 4px;
    padding: 10px;
    height: 120px;
    width: 120px;
    margin-top: 20px;
    margin-right: 30px;
}
.box6{
    height: 100%;
    width: 100%;
    padding: 20px;
}
.text{
    font-size: 120%;
    margin-bottom: 30px;
}
.money{
    font-size: 200%;
    color: blue;
    font-weight: 700;
}
.box7{
    margin-left: 30px;
}
.box8{
    margin-bottom: 20px;
}
.box9{
    display: inline-block;
    padding-left: 50px;
    vertical-align: top;
}
.box10{
    font-size: 150%;
    margin-top: 20px;
    margin-bottom: 20px;
}
.box11{
    font-size: 250%;
    color: blue;
}
</style>